<template>
	<!-- 无限下滑加载 -->
	<div class="educationList" v-infinite-scroll="educationLoadMore" infinite-scroll-disabled="loading"
	 infinite-scroll-distance="10">
		<!-- 加载item -->
		<div class="educationItem" v-for="item in educationItemList" :key="item.id" v-on:click="goDetailsView(item.id)">
			<div class="item_img" :style="{ backgroundImage: 'url(' + item.picture + ')' }"></div>
			<p class="item_title">
				<!-- 入门级日语培训/川师校园内/灵活排课 -->
				{{ item.title }}
			</p>
			<div class="item_label">
				<span class="item_state">招生中</span>
				<span class="item_price">￥{{item.money}}</span>
			</div>
			<p class="item_text">
				<!-- 初级：掌握基本的日语，较简单的商务职场用语，就日常生活的话题、职场话题表达的意见，请求等：如邀请，预约，请求等。<br />
				中级：理解各种场面的日语。能阅读各类话题的报纸及杂质报道等论点清晰的文章，能就抽象或者文化方面的内容表达自己的意见。 -->
				{{item.brief}}
			</p>
			<div class="item_line"></div>
		</div>
		<div style="height: 1.5625rem;"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				educationItemList: [],
				nowPage: 1,
				limit: 5
			};
		},
		created() {

		},
		methods: {
			// 页面创建和滚动到底部都会执行这个方法
			educationLoadMore() {
				this.loading = true;
				//拿数据
				this.$axios.post('/api/apply/apply_train', {
						page: this.nowPage,
						limit: this.limit
					})
					.then((response) => {
						
						//如果请求出现错误
						if(response.code != 200){
							console.log(response.msg);
							this.loading = false;
							return;
						}
						
						this.nowPage = this.nowPage + 1;
						let newList = response.data;
						this.educationItemList.push.apply(this.educationItemList,newList);
						
						this.loading = false;
						
					})
					.catch((error) => {
						console.log(error);
						this.loading = false;
					});

			},
			goDetailsView(id) {
				localStorage.sign_id = id;
				this.$router.push({
					name: 'SignUpDetails',
					params: {
						id: id
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	p {
		margin: 0rem;
	}

	.educationList {
		width: 21.5625rem;

		.educationItem {
			margin-bottom: 1.5625rem;

			.item_img {
				width: 21.5625rem;
				height: 12.5rem;
				background-color: #234567;
				border-radius: 0.625rem;
				background-image: url(../../assets/item_img.png);
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				overflow: hidden;
			}

			.item_title {
				margin-top: 0.625rem;
				color: #333333;
				font-size: 0.9375rem;
			}

			.item_label {
				width: 21.5625rem;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: 0.875rem;

				.item_state {
					color: #4e7aff;
					font-size: 0.75rem;
				}

				.item_price {
					color: #ff0000;
					font-size: 0.8125rem;
				}
			}

			.item_text {
				margin-top: 0.8125rem;
				color: #666666;
				font-size: 0.8125rem;
			}

			.item_line {
				width: 21.5625rem;
				height: 0.0625rem;
				margin-top: 1.5625rem;
				background-color: #f2f2f2;
			}
		}
	}
</style>
